<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer{
            width: 80%;
            height: 500px;
            /* box-shadow: 2px -2px 8px #999; */
            margin: auto;
        }
        h3{
            color: white;
            text-shadow: 2px 2px 4px #000;
        }
        table,td{
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        table{
            margin: auto;
        }
        td{
            width: 220px;
            height: 30px;
            color: #333;
            font-size: 14px;
        }
        
        fieldset{
            width: 60%;
            margin: auto;
            border: 0px;
            box-shadow: 2px -2px 4px #999;
            border-radius: 20px;
            padding-top: 20px;
        }
        .c{
            border: 1px solid green;
            width: 80%;
            height: 28px;
            border-radius: 5px;
        }
        .init{
            font-size: 12px;
            color: #ccc;
        }
        .success{
            font-size: 12px;
            color: green;
        }
        .error{
            font-size: 12px;
            color: red;
        }
       
    </style>
</head>
<body>
    <div id="outer">
       
            <form action="http://www.baidu.com" id="register_form" onsubmit="return register();">
           
                <fieldset>
                    <table>
                    <legend><h3>用户登录</h3></legend>
                    <tr>
                        <td>用户名</td>
                        <td><input class="c" type="text" id="username"></td>
                        <td><span class="init">*</span></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input class="c" type="password" id="pwd1"></td>
                        <td><span class="init">*</span></td>
                    </tr>
                    <tr>
                        <td>确认密码</td>
                        <td><input class="c" type="password" id="pwd2"></td>
                        <td><span class="init">*</span></td>
                    </tr>
                    <tr>
                        <!-- <td><input type="button" onclick="register()" value="register"></td> -->
                        <td><input type="submit" onclick="register()" value="register"></td>
                        <td><input type="reset" value="重置"></td></td>
                    </tr>
                </table>
                </fieldset>
           
            </form>
    </div>
    <script>
        let username = document.getElementById("username");
        let pwd1 = document.getElementById("pwd1");
        let pwd2 = document.getElementById("pwd2");

        username.onblur=function(){
            //定义一个正则
            let user_reg = /^[a-z]\w{5}$/;
            let user_span = this.parentElement.nextElementSibling.children[0];
            if(user_reg.test(this.value)){
                //获取对应的span对象
                user_span.innerHTML="√";
                user_span.className="success";
                return true;
            }else{
                user_span.innerHTML="* 首字母必须是小写,长度是6位";
                user_span.className="error";
                return false;
            }
        }

        pwd1.onblur=function(){
            //定义一个正则
            let pwd1_reg = /^\d{6}$/;
            let pwd1_span = this.parentElement.nextElementSibling.children[0];
            if(pwd1_reg.test(this.value)){
                //获取对应的span对象
                pwd1_span.innerHTML="√";
                pwd1_span.className="success";
                return true;
            }else{
                pwd1_span.innerHTML="* 密码长度是6位数字";
                pwd1_span.className="error";
                return false;
            }
        }

        pwd2.onblur=function(){
            //定义一个正则
            let pwd2_span = this.parentElement.nextElementSibling.children[0];
            if(pwd2.value === pwd1.value && pwd2.value!=""){
                //获取对应的span对象
                pwd2_span.innerHTML="√";
                pwd2_span.className="success";
                return true;
            }else{
                pwd2_span.innerHTML="* 俩次输入密码不一致";
                pwd2_span.className="error";
                return false;
            }
        }

        //通过普通按钮进行提交
        // function register(){
        //     let form = document.getElementById("register_form");
        //     form.submit();
        // }

        //提交按钮 - form标签加上onsubmit="return register();"
        function register(){
            if(username.onblur() & pwd1.onblur() & pwd2.onblur()){
                return true;
            }
            return false;
        }
    </script>
</body>
</html>